<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar :viewerSource="viewerSource" style="top:180px" />
    <div class="tool-box-left-top">
      <!-- <p><button :class="{active}" @click="shortcutAction=!shortcutAction">启用键盘操控</button></p> -->
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="relativeHeight" :max="10000" /></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="shadows">shadows</a-checkbox></div> -->
      <div class="select-box-wrapper"><select-box :options="flyOptions" /></div>
    </div>
    <div class="tool-box-left-bottom"></div>
    <GlobeRotater showTime :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
// https://sandcastle.cesium.com/?src=Camera%20Tutorial.html&label=All
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch, toRaw } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
// import { G3V } from '@g3x';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import {viewerMixin} from '@mixins';
import merge from '@g3x/utils/merge';

const $g3vOptions = {
  viewers: [
    {
      viewer: {
        // sceneMode: Cesium.SceneMode.SCENE2D
      }
    }
  ]
};

const flyOptions = {};

export default defineComponent({
  name: 'fly', // 飞行动画
  mixins: [viewerMixin],
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  props: {},
  setup() {
    return {};
  },
  data() {
    return {
      flyOptions
    };
  },
  computed: {},
  watch: {},
  methods: {
    g3vOptionsGet(original) {
      const g3vOptions = merge(original, $g3vOptions, true);
      return g3vOptions;
    },
    onViewerInited() {
      console.log('fly onViewerInited');
    },
    initEffects() {
      let vm = this;
      const { viewer } = vm;
      var pinBuilder = new Cesium.PinBuilder();

      var bluePin = viewer.entities.add({
        name: 'Blank blue pin',
        position: Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),
        billboard: {
          image: pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM
        }
      });

      var questionPin = viewer.entities.add({
        name: 'Question mark',
        position: Cesium.Cartesian3.fromDegrees(-75.1698529, 39.9220071),
        billboard: {
          image: pinBuilder.fromText('?', Cesium.Color.BLACK, 48).toDataURL(),
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM
        }
      });

      var url = '//zzgis.com/cdn/3d/Assets/Textures/maki/grocery.png';
      var groceryPin = Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function(canvas) {
        return viewer.entities.add({
          name: 'Grocery store',
          position: Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
          billboard: {
            image: canvas.toDataURL(),
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM
          }
        });
      });

      //Create a red pin representing a hospital from the maki icon set.
      var hospitalPin = Cesium.when(pinBuilder.fromMakiIconId('hospital', Cesium.Color.RED, 48), function(canvas) {
        return viewer.entities.add({
          name: 'Hospital',
          position: Cesium.Cartesian3.fromDegrees(-75.1698606, 39.9211275),
          billboard: {
            image: canvas.toDataURL(),
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM
          }
        });
      });

      //Since some of the pins are created asynchronously, wait for them all to load before zooming/
      Cesium.when.all([bluePin, questionPin, groceryPin, hospitalPin], function(pins) {
        viewer.zoomTo(pins);
      });
    }
  }
});
</script>

<style lang="less">
.tool-box-left-top {
  display: flex;
  button {
    min-width: 5em;
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: all 500ms;
    &:hover {
      opacity: 0.75;
    }
    &.active {
      background-color: rgba(0, 20, 200, 0.75);
    }
  }
}
</style>
